<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    style="display: flex; flex-direction: column; height: 100%"
  >
    <div class="inf_basic">
      <div class="title_h4">
        <h4 class="title_inf">企业基本信息</h4>
      </div>
      <el-form
        ref="enterpriseDataRef"
        :rules="enterpriseDataRule"
        label-position="top"
        :model="enterpriseData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="企业全称" prop="fullName">
          <el-input
            v-model.trim="enterpriseData.fullName"
            placeholder="请输入企业全称"
            clearable
            :disabled="!edit"
          />
        </el-form-item>
        <el-form-item label="企业简称" prop="abbrevia">
          <el-input
            v-model.trim="enterpriseData.abbrevia"
            placeholder="请输入企业简称"
            clearable
            :disabled="!edit"
          />
        </el-form-item>
        <el-form-item label="企业代码">
          <div class="input_show">
            <el-input v-model.trim="enterpriseData.code" disabled />
            <!-- <el-icon color="#999" @click="showViewVal(false)" v-if="showView"><View /></el-icon>
            <el-icon color="#999" v-else @click="showViewVal(true)"><Hide /></el-icon> -->
          </div>
        </el-form-item>
        <el-form-item label="企业地址">
          <SingleAddress ref="addrsDom" :address="enterpriseData.addr" :disabled="!edit" />
        </el-form-item>
        <el-form-item label="企业详细地址">
          <el-input v-model.trim="enterpriseData.address" :disabled="!edit" maxlength="200" />
        </el-form-item>
      </el-form>
      <div class="btn_xiugai" style="display: flex; gap: 5px; margin-bottom: 10px">
        <HPlainButton v-if="!edit" @click="onEdit">修改</HPlainButton>
        <HPlainButton v-if="edit" @click="onSave(enterpriseDataRef)">保存修改</HPlainButton>
        <HButton v-if="edit" @click="edit = false">取消</HButton>
      </div>
    </div>
    <div class="inf_basic" style="flex: 1; margin-top: 12px">
      <div class="title_h4">
        <h4 class="title_inf">超级管理员</h4
        ><el-tooltip effect="light" :offset="5" content="企业归属" placement="top-start">
          <el-icon size="18" color="#ccc">
            <QuestionFilled />
          </el-icon>
        </el-tooltip>
      </div>
      <div class="inf_x">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <div class="liter_tip">
          <p>{{ enterpriseData?.adminEmpName }}</p>
          <p>{{ enterpriseData?.adminEmpPhone }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import type { FormInstance } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import SingleAddress from '@/components/address/singleAddress.vue'
  import { getCustomerInfo, updateCustomer } from '../../../../../api/system'
  import { QuestionFilled } from '@element-plus/icons-vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'

  const loading = ref(false)
  const addrsDom = ref()
  const edit = ref(false) // 是否修改
  const enterpriseDataRef = ref<FormInstance>()
  const enterpriseData = ref({
    fullName: '', // 企业全称
    abbrevia: '', // 企业简称
    code: '', // 企业代码
    addr: {
      // 地址
      province: '',
      city: '',
      area: '',
      town: '',
    },
    address: '', // 详细地址
    adminEmpPhone: '',
    adminEmpName: '',
  })

  const enterpriseDataRule = ref({
    fullName: [{ required: true, message: '企业全称不能为空', trigger: ['change', 'blur'] }],
    abbrevia: [{ required: true, message: '企业简称不能为空', trigger: ['change', 'blur'] }],
  })

  const text = ref('hdkjshjkhhhfhjdfh')
  const tmp = ref('')
  const showView = ref(true)
  const showViewVal = (val) => {
    showView.value = val
    if (!val) {
      text.value = tmp.value
    } else {
      text.value = maskString(text.value)
    }
  }
  const maskString = (str) => {
    var length = str.length
    tmp.value = str
    if (length <= 10) {
      return str
    }
    var start = str.slice(0, 5)
    var end = str.slice(-5)
    var masked = start + '*'.repeat(length - 10) + end
    return masked
  }

  // 修改
  const onEdit = () => {
    edit.value = true
  }

  // 保存修改
  const onSave = async (formEl: FormInstance | undefined) => {
    await formEl.validate((valid, fields) => {
      if (valid) {
        updateCustomerApi()
      }
    })
  }

  // 清空对象数据
  const clearEnterpriseData = () => {
    enterpriseData.value = {
      fullName: '', // 企业全称
      abbrevia: '', // 企业简称
      code: '', // 企业代码
      addr: {
        province: '',
        city: '',
        area: '',
        town: '',
      },
      address: '',
      adminEmpPhone: '',
      adminEmpName: '',
    }
  }

  // 更新企业信息Api
  const updateCustomerApi = () => {
    const addr = addrsDom.value.getSelectAddr()
    const data = {
      name: enterpriseData.value.fullName,
      abbrevia: enterpriseData.value.abbrevia,
      province: addr.province,
      city: addr.city,
      area: addr.area,
      town: addr.town,
      address: enterpriseData.value.address,
      adminEmpPhone: '',
      adminEmpName: '',
    }
    updateCustomer(data).then((res) => {
      ElMessage({
        type: res.data.success ? 'success' : 'error',
        message: res.data.message,
        duration: 5000,
        showClose: true,
        plain: true,
      })
      if (res.data.success) {
        edit.value = false
        requestCustomerApi()
      }
    })
  }

  // 获取企业信息Api
  const requestCustomerApi = async () => {
    clearEnterpriseData()
    loading.value = true
    await getCustomerInfo().then((res) => {
      loading.value = false
      if (res.data.success) {
        const data = res.data.data.row
        enterpriseData.value = {
          fullName: data.fullName, // 企业全称
          abbrevia: data.abbrevia, // 企业简称
          code: data.code, // 企业代码
          addr: {
            province: data.province,
            city: data.city,
            area: data.area,
            town: data.town,
          },
          address: data.address,
          adminEmpPhone: data.adminEmpPhone,
          adminEmpName: data.adminEmpName,
        }
      }
    })
  }

  // 获取企业信息
  onMounted(async () => {
    requestCustomerApi()
  })
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
